const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');
const path = require('path')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,//关闭vue3语法检查
  chainWebpack(config) {
    config.resolve.alias.set('@', path.resolve(__dirname, 'src'))
    // config.resolve.alias.set('store', path.resolve(__dirname, 'src/stores'))
  },
  configureWebpack: {
    resolve: {
      alias: {
        "store": path.resolve(__dirname, "src/stores")
      }
    },
    // 分包，防止第三方包体积太大影响首屏加载
    optimization: {
      /**
               * runtimeChunk可选值有：true或'multiple'或'single'
               * true或'multiple'会有每个入口对应的chunk。不过一般情况下
               * 考虑到要模块初始化，设置为single就够多数情况下使用啦。
               * 详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationruntimechunk
               * */
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all', // 可选值：all，async 和 initial。all功能最强大，所以咱们就使用all
        minSize: 20000,// 引入的模块大于20kb才做代码分割，官方默认20000，这里不用修改了
        maxSize: 60000,// 若引入的模块大于60kb，则告诉webpack尝试再进行拆分
        minChunks: 1,
        maxAsyncRequests: 30,
        maxInitialRequests: 30,// 最大并行请求数，为了以防万一，设置无穷大即可Infinity,
        automaticNameDelimiter: '~',
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
            priority: -10,// 优先级值越大优先级越高，默认-10，不用修改
            reuseExistingChunk: true,
          },
          defaultVendors: {
            test: /[\\/]node_modules[\\/](?!(@babel|core-js|webpack|vue-loader|vue-style-loader|css-loader|vue-template-compiler|babel-loader))/,
            priority: -20,
            reuseExistingChunk: true,
          },
        },
      },
    },
    // 缩放报错
    devServer: {
      client: {
        overlay: false,
      },
      port: 5744, // 启动端口号
      open: true, // 启动后是否自动打开网页
      proxy: require('./dev.proxy.conf.js') // 引入代理配置文件
    },
  },
})

